// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
    data: function () {
        return {
            count: 0
        }
    },
    template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Vue.component('blog-post', {
    props: ['post1'],
    template: `
    <div class="blog-post">
    <h3>{{ post1.title }}</h3>
    <button v-on:click="$emit('enlarge-text',0.1)">
      Enlarge text
    </button>
    <div v-html="post1.content"></div>
  </div>
  `,
  methods:{
      
  }
})

// new Vue({ el: '#components-demo' })


// new Vue({
//     el: '#blog-post-demo',
//     data: {
//         test: 1,
//         posts: [
//             { id: 1, title: 'My journey with Vue', content: '123123' },
//             { id: 2, title: 'Blogging with Vue', content: '123123' },
//             { id: 3, title: 'Why Vue is so fun', content: '123123' }
//         ]
//     }
// })

new Vue({
    el: '#blog-posts-events-demo',
    data: {
        posts: [
            { id: 1, title: 'My journey with Vue', content: '123123' },
            { id: 2, title: 'Blogging with Vue', content: '123123' },
            { id: 3, title: 'Why Vue is so fun', content: '123123' }
        ],
        postFontSize: 1
    },
    methods:{
        changeFontSize: function(ele){
            this.postFontSize += ele;
        }
    }
})
